/*
  学习目标：使用children属性，模拟vue中插槽
  特指：组件标签夹着的内容区域, 类似vue中的插槽
  1. 普通、具名、
  
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
          <h1>帮我放在Child</h1>
        </Child>
        <Child></Child>
        <ChildHasName>{{ header: 'hello React', content: 'hello Vue3' }}</ChildHasName>
        <ChildHasName>
          {{
            header: <h2>静夜思</h2>,
            content: (
              <ul>
                <li>床前明月光</li>
                <li>疑是地上霜</li>
              </ul>
            ),
          }}
        </ChildHasName>
      </div>
    );
  }
}

function Child({ children = '默认值' }) {
  return <div>{children}</div>;
}

function ChildHasName({ children }) {
  const { header, content } = children;
  return (
    <div>
      <div className="header">{header}</div>
      <div className="content">{content}</div>
    </div>
  );
}
